@font-face {
  font-family: 'fzht';
  /*字体名称*/
  src: url('../../assets/fzht.ttf');
  /*字体源文件*/
}

.bg {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: url("../../assets/xinbgall.png") fixed center center no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  .bg_top {
      height: 8vh;
      position: absolute;
      width: 100%;
      top: 10vh;
      display: flex;
      background: url("../../assets/bgtop.png") fixed center center no-repeat;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%; // justify-content: center;
      align-items: center;
      .bgtop_L {
          width: 50px;
          height: 50px;
          background-color: red;
          margin-left: 10vh;
          margin-right: 5vh;
      }
      .bgtop_R {
          flex: 1;
          padding: 2vh 0px;
          box-sizing: border-box;
          .bgtop_z {
              font-size: 26px;
              font-family: fzht;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              text-shadow: 0px 1px 4px rgba(3, 3, 3, 0.7);
          }
          .bgtop_y {
              font-size: 12px;
              font-family: fzht;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              text-shadow: 0px 1px 4px rgba(3, 3, 3, 0.7);
          }
      }
  }
  .bg_moddle {
      height: 10vh;
      width: 100%; // background-color: aqua;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-around;
      align-items: center;
      .bg_item {
          cursor: pointer;
          width: 300px;
          height: 80px;
          display: flex;
          align-items: center;
          position: relative;
        
          .item_L {
              width: 90px;
              height: 90px; 
              border: 6px solid rgba(32, 156, 249, 1);
              // box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.7); // opacity: 0.75;
              border-radius: 50%;
              overflow: hidden;
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              z-index: 999;
              background: rgba(255, 255, 255, 1);
              left: -10px;
          }
          
          .item_L2 {
            width: 90px;
            height: 90px; 
            border:6px solid rgba(239,164,165,1);
            // box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.7); // opacity: 0.75;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            z-index: 999;
            background: rgba(255, 255, 255, 1);
            left: -10px;
        }
        .item_L3 {
          width: 90px;
          height: 90px; 
          border:6px solid rgba(149,213,144,1);
          // box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.7); // opacity: 0.75;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          z-index: 999;
          background: rgba(255, 255, 255, 1);
          left: -10px;
      }
   
          .item_R {
              flex: 1;
              display: flex;
              height: 70px; // background: rgba(255, 255, 255, 1);
              justify-content: center;
              align-items: center;
              background: rgba(255, 255, 255, 1);
              border: 6px solid rgba(239, 243, 251, 1);
              box-shadow: 0px 16px 18px 0px rgba(0, 0, 0, 0.25);
              font-weight:400;
              color:rgba(0,0,0,1);
              border-radius: 12px;
              font-size: 20px;
              padding-left: 60px;
              box-sizing: border-box;
          }
      }
  }
  .bg_bottom {
    height: 4vh;
    position: absolute;
    width: 100%;
    bottom: 10vh;
    display: flex;
    background: url("../../assets/bgtop.png") fixed center center no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%; // justify-content: center;
    align-items: center;
    justify-content: space-around;
    font-weight:400;
    color:rgba(255,255,255,1);
    text-shadow:0px 1px 4px rgba(3,3,3,0.7);
    box-sizing: border-box;
    padding: 0px 20vh;

  }
}